shopify page

3 files changed, 63 insertions, 4 deletions

diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
index 2bd465a7..842c2eba 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
@@ -15,6 +15,7 @@
 	import Account from './_account.svelte';
 	import Pos from './_pos.svelte';
 	import Security from './_security.svelte';
+	import Shopify from './_shopify.svelte';
 
 	import { PUBLIC_COINOS_URL } from '$env/static/public';
 
@@ -33,7 +34,7 @@
 
 	$: form?.success && success('Settings saved!');
 
-  $: form?.message && fail(form.message);
+	$: form?.message && fail(form.message);
 
 	$: if (form?.message?.startsWith('Pin')) {
 		fail('Wrong pin, try again');
@@ -43,7 +44,8 @@
 	let tabs = [
 		{ name: 'account', key: 'ACCOUNT', comp: Account },
 		{ name: 'pos', key: 'POINT_OF_SALE', comp: Pos },
-		{ name: 'security', key: 'SECURITY', comp: Security }
+		{ name: 'security', key: 'SECURITY', comp: Security },
+		{ name: 'shopify', key: 'SHOPIFY', comp: Shopify }
 	];
 
 	$: ({ comp } = tabs.find((t) => t.name === tab));
@@ -134,9 +136,9 @@
 		</h1>
 
 		<div class="font-bold flex justify-around items-center border-b pb-3 text-secondary">
-			{#each tabs as { name, key }}
+			{#each tabs.filter((t) => t.name !== 'shopify') as { name, key }}
 				<a href={`/${user.username}/settings/${name}`}>
-					<button class="hover:opacity-80" class:text-black={tab === name}
+					<button class="hover:opacity-80" class:text-black={tab === name || (tab === "shopify" && name === "pos")}
 						>{$t(`user.settings.${key}`)}</button
 					>
 				</a>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
index 8e2e2cc5..ef5b7869 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
@@ -31,3 +31,10 @@
 		{$t('user.settings.tipPromptDescription')}
 	</p>
 </div>
+
+<a href="./shopify">
+	<button class="flex rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full gap-2 my-5 justify-center">
+		<img src="/icons/shopify.svg" class="w-8" />
+		<div class="my-auto">Shopify Integration</div>
+	</button>
+</a>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_shopify.svelte b/src/routes/(app)/[username]/settings/[...tab]/_shopify.svelte
new file mode 100644
index 00000000..d63f2f89
--- /dev/null
+++ b/src/routes/(app)/[username]/settings/[...tab]/_shopify.svelte
@@ -0,0 +1,50 @@
+<script>
+	import { t } from '$lib/translations';
+	import { Icon } from '$comp';
+	import { page } from '$app/stores';
+
+	export let user;
+  $: paymentsUrl = user.shopifyStore && "https://admin.shopify.com/store/" + user.shopifyStore + "/settings/payments";
+  $: checkoutUrl = user.shopifyStore && "https://admin.shopify.com/store/" + user.shopifyStore + "/settings/checkout#:r86:Labelt";
+</script>
+
+<div>
+	<label for="username" class="font-bold mb-1 block">Store ID</label>
+	<div class="flex mb-2">
+		<div class="text-gray-600 p-4 my-auto bg-gray-100 border rounded-l-2xl border-r-0 pr-1">admin.shopify.com/store/</div>
+		<input
+			type="text"
+			name="username"
+			bind:value={user.shopifyStore}
+			class="border-l-0 rounded-l-none w-auto min-w-0 pr-1 grow"
+		/>
+	</div>
+	<p class="text-secondary my-2">
+  Visit your store <a class:active={!!paymentsUrl} href={paymentsUrl || undefined}>Settings</a> and add <code class="text-black">Bitcoin</code> under <code class="text-black">Payments -> Manual payment methods</code>
+	</p>
+</div>
+
+<div>
+	<label for="display" class="font-bold mb-1 block">API Public Key</label>
+	<input type="text" name="display" bind:value={user.shopifyPubkey} />
+</div>
+
+<div>
+	<label for="display" class="font-bold mb-1 block">API Secret Key</label>
+	<input type="text" name="display" bind:value={user.shopifySecret} />
+</div>
+
+<div>
+	<label for="display" class="font-bold mb-1 block">Additional Scripts</label>
+  <textarea rows={5} type="text" name="display" readonly><script src="{`${$page.url.protocol}//${$page.url.host}/${user.username}/shopify.js`}"> </script></textarea>
+
+	<p class="text-secondary my-2">
+  Copy this into your Shopify store <a class:active={!!paymentsUrl}  href={checkoutUrl}>Settings</a> under <code class="text-black">Checkout -> Additional scripts</code>
+	</p>
+</div>
+
+<style>
+  .active {
+    @apply text-blue-500;
+  } 
+</style>